<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div class="parent">
      <div class="child">child</div>
    </div>
    <p>dddddddddddddddddddddddd</p>

    <style>
      .parent {
        width: 100px;
        height: 100px;
        background-color: black;
        border: 1px solid red;
        margin: 50px;
        position: relative;

        
      }
      .child {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(255, 0, 0, 0.5);
        transition: all 1s;


        /* transform: rotate(45deg); */
        /* transform 变形  rotate2d旋转  45deg 角度 */

        /* transform: translateX(200px) translateY(200px); */
        /* transform: translate(100px, 200px); */

        /* 改变位置 不会影响其他元素的位置 （重绘与回流） */
        /* transform 变形 translate偏移 位移 */

        /* transform: scale(2); */
        /* transform: scaleX(2); */
        /* 缩放 0-1缩小 大于1放大 */


        /* transform: skewX(45deg); */
        /* transform: skewY(-45deg); */
      }
      .child:hover {
        /* transform: scale(2); */
        /* transform: skewX(45deg); */
        transform: rotate(45deg);
      }
    </style>
  </body>
</html>
